<template>
  <div class="link flex">
    <table border="1" class="tabledata" v-if="inputs==1">
      <tr>
        <td colspan="22" class="bg" style="font-size: 16px;font-weight: bold;">原料煤管理情况</td>
      </tr>
      <tr><td colspan="22" style="color: red;">该日数据未审核</td></tr>
    </table>
    <table border="1" class="tabledata" v-else>
      <tr>
        <td colspan="22" class="bg" style="font-size: 16px;font-weight: bold;">原料煤管理情况</td>
      </tr>
      <tr>
        <td rowspan="21"><div>煤场贮煤情况</div></td>
        <td rowspan="2"><div>序号</div></td>
        <td colspan="3">A区</td>
        <td colspan="3">B区</td>
        <td colspan="3">C区</td>
        <td colspan="3">D区</td>
        <td rowspan="21"><div>每日进场煤统计</div></td>
        <td rowspan="2"><div>序号</div></td>
        <td rowspan="2"><div>运输方式</div></td>
        <td rowspan="2">煤种名称</td>
        <td rowspan="2">进场车数</td>
        <td rowspan="2"><div>进场总量（t）</div></td>
        <td rowspan="2"><div>日累计（t）</div></td>
        <td rowspan="2">存储位置</td>
      </tr>
      <tr>
        <td>煤种</td>
        <td>名称</td>
        <td>数量</td>
        <td>煤种</td>
        <td>名称</td>
        <td>数量</td>
        <td>煤种</td>
        <td>名称</td>
        <td>数量</td>
        <td>煤种</td>
        <td>名称</td>
        <td>数量</td>
      </tr>
      
      <tr v-for="item in 18">
        <td>{{item}}</td>
        <td>
          <input type="text" class="dinput" v-model="inputs[item-1]['amz'+item]" v-if="!date.isup" />
          <span v-else>{{inputs[item-1]['amz'+item]}}</span>
        </td>
        <td>
          <input type="text" class="dinput" v-model="inputs[item-1]['amc'+item]" v-if="!date.isup" />
          <span v-else>{{inputs[item-1]['amc'+item]}}</span>
        </td>
        <td>
          <input type="number" class="dinput" v-model="inputs[item-1]['asl'+item]" v-if="!date.isup" />
          <span v-else>{{inputs[item-1]['asl'+item]}}</span></td>
        <td><input type="text" class="dinput" v-model="inputs[item-1]['bmz'+item]" v-if="!date.isup" /><span v-else>{{inputs[item-1]['bmz'+item]}}</span></td>
        <td><input type="text" class="dinput" v-model="inputs[item-1]['bmc'+item]" v-if="!date.isup" /><span v-else>{{inputs[item-1]['bmc'+item]}}</span></td>
        <td><input type="number" class="dinput" v-model="inputs[item-1]['bsl'+item]" v-if="!date.isup" /><span v-else>{{inputs[item-1]['bsl'+item]}}</span></td>
        <td><input type="text" class="dinput" v-model="inputs[item-1]['cmz'+item]" v-if="!date.isup" /><span v-else>{{inputs[item-1]['cmz'+item]}}</span></td>
        <td><input type="text" class="dinput" v-model="inputs[item-1]['cmc'+item]" v-if="!date.isup" /><span v-else>{{inputs[item-1]['cmc'+item]}}</span></td>
        <td><input type="number" class="dinput" v-model="inputs[item-1]['csl'+item]" v-if="!date.isup" /><span v-else>{{inputs[item-1]['csl'+item]}}</span></td>
        <td><input type="text" class="dinput" v-model="inputs[item-1]['dmz'+item]" v-if="!date.isup" /><span v-else>{{inputs[item-1]['dmz'+item]}}</span></td>
        <td><input type="text" class="dinput" v-model="inputs[item-1]['dmc'+item]" v-if="!date.isup" /><span v-else>{{inputs[item-1]['dmc'+item]}}</span></td>
        <td><input type="number" class="dinput" v-model="inputs[item-1]['dsl'+item]" v-if="!date.isup" /><span v-else>{{inputs[item-1]['dsl'+item]}}</span></td>
        <td v-if="item<15">{{item}}</td>
        <td v-if="item>=15">{{item-14}}</td>
        <td rowspan="14" v-if="item==1">汽运</td>
        <td rowspan="5" v-if="item==15">火运</td>
        <td><input type="text" class="dinput" v-model="inputs[item-1]['mzmc'+item]" v-if="!date.isup" /><span v-else>{{inputs[item-1]['mzmc'+item]}}</span></td>
        <td><input type="number" class="dinput" v-model="inputs[item-1]['jccs'+item]" v-if="!date.isup" /><span v-else>{{inputs[item-1]['jccs'+item]}}</span></td>
        <td><input type="number" class="dinput" v-model="inputs[item-1]['jczl'+item]" v-if="!date.isup" /><span v-else>{{inputs[item-1]['jczl'+item]}}</span></td>
        <td rowspan="14" v-if="item==1">{{carnumber}}</td>
        <td rowspan="5" v-if="item==15">{{firenumber}}</td>
        <td><input type="text" class="dinput" v-model="inputs[item-1]['ccwz'+item]" v-if="!date.isup" /><span v-else>{{inputs[item-1]['ccwz'+item]}}</span></td>
      </tr>
      <tr>
        <td>合计</td>
        <td></td>
        <td></td>
        <td>{{atotalnumber}}</td>
        <td></td>
        <td></td>
        <td>{{btotalnumber}}</td>
        <td></td>
        <td></td>
        <td>{{ctotalnumber}}</td>
        <td></td>
        <td></td>
        <td>{{dtotalnumber}}</td>
        <td>5</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td colspan="4">库存总量（t）</td>
        <td>{{kczlnumber}}</td>
        <td colspan="5">煤场存量（t）</td>
        <td>{{mcclnumber}}</td>
        <td colspan="2">局内煤存量（t）</td>
        <td><input type="number" class="dinput" v-model="jnmcl" v-if="!date.isup" /><span v-else>{{jnmcl}}</span></td>
        <td colspan="3">日进场煤合计（t）</td>
        <td colspan="5">{{rjcmnumber}}</td>
      </tr>
      <tr>
        <td colspan="22">
          <textarea cols="300" rows="2" v-model="content" v-if="!date.isup"></textarea><div v-else style="white-space: pre-line;text-align: left;">{{content}}</div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script lang="ts" setup name='ylmglqk'>
import cache from '@/utils/cache'
import { getYlmglqk, ylmglqkSave, ylmglqkSubmit } from '@/api/report'

const date = defineProps(['date','isup','ishistory'])
watch(date, async (n) => {
  getData()
})

// 循环生成绑定数据  一共18行 
const arr = []  
for(let i=1;i<=18;i++){
  arr.push({
    ['amz'+i]:'',
    ['amc'+i]:'',
    ['asl'+i]:0,
    ['bmz'+i]:'',
    ['bmc'+i]:'',
    ['bsl'+i]:0,
    ['cmz'+i]:'',
    ['cmc'+i]:'',
    ['csl'+i]:0,
    ['dmz'+i]:'',
    ['dmc'+i]:'',
    ['dsl'+i]:0,
    ['mzmc'+i]:'',
    ['jccs'+i]:'',
    ['jczl'+i]:'',
    ['ccwz'+i]:'',
  })
}
// 整表 数据绑定
const inputs = ref(arr)
// 说明文字
const content = ref('记事：')
// 各区 数量合计
const atotalnumber = ref(0)
const btotalnumber = ref(0)
const ctotalnumber = ref(0)
const dtotalnumber = ref(0)
// 煤场存量（t）
const mcclnumber = ref(0)
// 库存总量（t）
const kczlnumber = ref(0)
const cmclnumber = ref(0)
// 局内煤存量
const jnmcl = ref(0)
// 汽运 日累计
const carnumber = ref(0)
// 火运 日累计
const firenumber = ref(0)
// 日进厂煤合计
const rjcmnumber = ref(0)


// 深层监听数据修改  根据数据变化 从新计算合计
watch(inputs, async (n) => {
  console.log(1111)
  let i = 1;
  let a = 0, b = 0,c = 0,d = 0,car = 0,fire = 0;
  n.forEach((item)=>{
    a += Number(item['asl'+i])
    b += Number(item['bsl'+i])
    c += Number(item['csl'+i])
    d += Number(item['dsl'+i])
    if(i<15){
      // 汽运
      car += Number(item['jczl'+i])
    }else{
      // 火运
      fire += Number(item['jczl'+i])
    }
    i++
  });
  // A+B+C+D = 煤场存量
  atotalnumber.value = a.toFixed(2)
  btotalnumber.value = b.toFixed(2)
  ctotalnumber.value = c.toFixed(2)
  dtotalnumber.value = d.toFixed(2)
  mcclnumber.value = (a + b + c + d).toFixed(2)
  
  kczlnumber.value = (a + b + c + d + cmclnumber.value).toFixed(2)
  
  // 汽运+火运 = 日进厂煤合计
  carnumber.value = car.toFixed(2)
  firenumber.value = fire.toFixed(2)
  rjcmnumber.value = (car + fire).toFixed(2)
},{ deep: true })

// 保存，调用接口
const save = async () => {
  let userInfo = cache.get('userInfo')
  let res = await ylmglqkSave({
    inputs:inputs.value,
    jnmcl:jnmcl.value,
    aid: userInfo.id,
    aname: userInfo.name,
    content:content.value,
    date:date.date,
  })
}
// 上报方法，调用接口
const uu = ref(cache.get('role_name'))
const submit = async () => {
  await ylmglqkSubmit({
    label:uu.value,
    date:date.date,
  })
}

const emit = defineEmits(['ischeck'])


const getData = async () => {
  getYlmglqk(date).then((res)=>{
    cmclnumber.value = parseFloat(res.cmclnumber)
    if(res.data.length>0){
      let newarr = []
      res.data.forEach((item,i)=>{
        let obj = {
          ['amz'+(i+1)]:item.amz,
          ['amc'+(i+1)]:item.amc,
          ['asl'+(i+1)]:item.asl,
          ['bmz'+(i+1)]:item.bmz,
          ['bmc'+(i+1)]:item.bmc,
          ['bsl'+(i+1)]:item.bsl,
          ['cmz'+(i+1)]:item.cmz,
          ['cmc'+(i+1)]:item.cmc,
          ['csl'+(i+1)]:item.csl,
          ['dmz'+(i+1)]:item.dmz,
          ['dmc'+(i+1)]:item.dmc,
          ['dsl'+(i+1)]:item.dsl,
          ['mzmc'+(i+1)]:item.mzmc,
          ['jccs'+(i+1)]:item.jccs,
          ['jczl'+(i+1)]:item.jczl,
          ['ccwz'+(i+1)]:item.ccwz,
        }
        newarr.push(obj)
      })
      jnmcl.value = res.data[0].jnmcl
      content.value = res.data[0].content
      inputs.value = newarr
    }else{
      console.log('date.ishistory',date.ishistory)
      if(date.ishistory==1){
        emit('ischeck')
      }else{
        inputs.value = arr
      }
    }
  })
}

onMounted(() => {
  getData()
})

defineExpose({
  save,
  submit
})

</script>

<style lang="scss" scoped>
.tabledata {
  width: 100%;
  border: 1px solid #aaa;
  td {
    text-align: center;
    border: 1px solid #aaa;
    padding: 3px;
  }
  .bg{
    background: #ccc;
  }
  .dinput{
    text-align: center;
    border-radius: 5px;
    width: 80px;
    border: 1px solid #ccc;
  }
}
</style>
